<meta charset="utf-8" />
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.js"></script>
<script src="08_accept.js"></script>
<style>
body {
	margin-top: 120px;
	margin-left: 180px;
}

#draggable {
	border: 1px solid red;
	width: 100px;
	height: 100px;
	padding: 0.5em;
	float: left;
	margin: 10px 10px 10px 0;
}

#target_draggable {
	border: 1px solid red;
	width: 100px;
	height: 100px;
	padding: 0.5em;
	float: left;
	margin: 10px 10px 10px 0;
}

#droppable {
	border: 1px solid red;
	width: 150px;
	height: 150px;
	padding: 0.5em;
	float: left;
	margin: 10px;
}

.drop {
	border: 1px solid blue !important;
}

.hover {
	border: 1px solid green !important;
}
</style>

<div id="draggable">
	<p>Drag Me</p>
</div>
<div id="target_draggable">
	<p>Drag Me</p>
</div>
<div id="droppable">
	<p>Drop Me</p>
</div>